import React, { Component } from 'react'
import PropTypes from 'prop-types'

/*
  1. 安装 cnpm install --save prop-types
  2. 导入属性验证的插件
  3. 组件名.propTypes 来进行设置属性
  4. name: PropTypes.string 添加指定类型
*/

const Header = (props)=>{
  return (
    <>
      <div> 欢迎来到 {props.name} -- { props.num } 班级 </div>
    </>
  )
}
// 给组件添加属性验证
// 设置的时候要使用小写的 propTypes
// 设置类型的时候使用大写的 PropTypes
Header.propTypes = {
  name: PropTypes.string, // 指明为 字符串类型
  num: PropTypes.number, // 指明为 数值类型
  title: PropTypes.oneOfType([ // 设置为多类型属性
    PropTypes.string,
    PropTypes.number,
    PropTypes.bool // 定义布尔类型
  ]),
  age: PropTypes.number.isRequired // 设置为 必传属性
}

class Content extends Component {
  render(){
    return (<>
      <div> {this.props.contentName} 学习 react 实际上就是在学 JavaScript </div>
    </>)
  }
}

export default class App extends Component {
  render() {
    return (
      <div>
        <Header name='H5-2218' num={10} title={true}></Header>
        <Content contentName='张一' />
      </div>
    )
  }
}
